@extends('default.layouts.adminPublic')
@section('title', '才情报告统计')
@section('headcss')
    @parent
    <link rel="stylesheet" href="{{asset('/default/css/admin/indexList.css')}}">
    @endsection
    @section('content')
    <div class="crumb_warp">
        <i class="fa fa-home"></i> <a href="{{url('admin/talent_report_list')}}">首页</a> &raquo; 才情报告统计
    </div>
    <!--结果集标题与导航组件 开始-->
    <div class="con">
        <div class="conMain">
            <div class="result_wrap">
                <div class="search">
                    <span><a class="province" style="text-decoration:none;" href="javascript:void(0)"><i class="fa fa-circle"></i>省份人数</a></span>
                    <span style="margin:0 30px 0 30px"><a style="text-decoration:none;" class="edu" href="javascript:void(0)"><i class="fa fa-circle-thin"></i>学历分布</a></span>
                    <span><a class="age" style="text-decoration:none;" href="javascript:void(0)"><i class="fa fa-circle-thin"></i>年龄分布</a></span>
                </div>
                <div class="message"><h2>才情报告统计</h2></div>
            </div>
            <div class="manage">
                @include('flash::message')
            </div>
                
            <div id="container" style="width:70%;height:1300px;margin:0 0 0 200px;"></div>
        </div>
    </div>
    <!--结果集标题与导航组件 结束-->
@endsection

@section('footerjs')
    @parent
    <script type="text/javascript" src="{{asset('/default/js/echarts.min.js')}}"></script>
    <script type="text/javascript">
    //省份人数
    $(function(){
        province();
        $('.province').on('click',function(){
            $(this).find('i').addClass('fa-circle').removeClass('fa-circle-thin');
            $('.edu').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
            $('.age').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
            province();
        });
    });
    function province(){
        $.ajax({
            type: 'post',
            url: "{{url('admin/talent_report_province')}}",
            data:{
                 _token:"{{ csrf_token() }}",
            },
            success:function(data){ 
                $('#container').empty();
                $('#container').css('height','1300px');
                get_province(data);
            }
        }); 
    }
    function get_province(result){
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '省份人数'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
            },
            yAxis: {

                type: 'category',
                data: result.title
            },
            series: [
                {   
                    name:'人数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderColor: 'rgba(51,204,255,255)',
                            color: 'rgba(51,204,255,255)'
                        }
                    },
                    data: result.num
                }
            ]
        };
        myChart.setOption(option);
    }

    //学历分布
    $('.edu').on('click',function(){
        $(this).find('i').addClass('fa-circle').removeClass('fa-circle-thin');
        $('.province').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
        $('.age').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
        $.ajax({
            type: 'post',
            url: "{{url('admin/talent_report_education')}}",
            data:{
                 _token:"{{ csrf_token() }}",
            },
            success:function(data){ 
                $('#container').empty();
                $('#container').css('height','600px');
                get_edu(data);
            }
        }); 
    });
    function get_edu(result){
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '学历分布'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip: {},
            legend: {
                data:['文凭']
            },
            xAxis: {
                data: result.title
            },
            yAxis: {},
            series: [{
                type: 'bar',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(51,204,255,255)',
                        color: 'rgba(51,204,255,255)'
                    }
                },
                data: result.num
            }]
        };
        myChart.setOption(option);
    }

    //年龄分布
    $('.age').on('click',function(){
        $(this).find('i').addClass('fa-circle').removeClass('fa-circle-thin');
        $('.edu').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
        $('.province').find('i').removeClass('fa-circle').addClass('fa-circle-thin');
        $.ajax({
            type: 'post',
            url: "{{url('admin/talent_report_age')}}",
            data:{
                 _token:"{{ csrf_token() }}",
            },
            success:function(data){ 
                $('#container').empty();
                $('#container').css('height','700px');
                get_age(data);
            }
        }); 
    });
    function get_age(result){
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title : {
                text: '年龄分布',
                x:'center'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['20岁以下','20-25岁','25-30岁','30-35岁','35-40岁','40-50岁','50岁以上']
               
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:result.data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    </script>
@endsection

